<template>
  <div>
    <div class="info box">
      <div class="header" v-text="customer.customerId?'联系人信息':'访客信息'">
      </div>
      <div v-if="customer.name" class="name" v-text="'姓名: ' + customer.name">
      </div>
      <div v-if="customer.email" class="email" v-text="'邮箱: ' + customer.email">
      </div>
      <div v-if="customer.customerMobile" class="email" v-text="'电话: ' + customer.customerMobile">
      </div>
      <div v-if="customer.mobile" class="email" v-text="'电话: ' + customer.mobile">
      </div>
      <div v-if="customer.online" class="online" v-text="'状态: ' + (customer.online == '1' ? '在线' : '离线')">
      </div>
      <div v-if="customer.startTime" class="start-time" v-text="'开始时间: ' + customer.startTime">
      </div>
    </div>
    <div class="ticket box" v-if="customer.customerId">
      <div class="header">
        工单历史
      </div>
      <div v-if="customer.ticketList && customer.ticketList.length > 0">
        <TicketItem :options="{mode:'simple'}" :ticket="ticket" v-for="ticket in customer.ticketList"></TicketItem>
      </div>
      <div v-else style="line-height: 40px;text-align: center;font-size: 12px;color: #666">
        暂无数据
      </div>
    </div>
  </div>
</template>

<script>
import TicketItem from '@/view/ticket/components/ticket-item'
import {findCustomerTicket} from "@/api/ticket";

export default {
  name: "customer",
  components: {
    TicketItem
  },
  props: {
    customer: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  created() {
    if(this.customer.customerId) {
      this.loadTicketList()
    }
  },
  methods: {
    loadTicketList() {
      if(this.customer.customerId) {
        findCustomerTicket(this.customer.customerId).then(res => {
          if(res.code == 200) {
            this.$set(this.customer,'ticketList',res.data)
          }
        })
      }
    }
  },
  watch:{
    customer() {
      if(this.customer.customerId) {
        this.loadTicketList()
      }
    }
  }
}
</script>

<style scoped lang="less">
.box {
  font-size: 14px;
  .header {
    border-bottom: 1px solid #F0F0F0;
    height: 40px;
    line-height: 40px;
    padding: 0 15px;
    color: #333333;
  }
}
.info {
  color: #666666;
  .name {
    line-height: 40px;
    height: 40px;
    padding: 0 15px;
  }
  .email {
    line-height: 40px;
    height: 40px;
    padding: 0 15px;
  }
  .online {
    line-height: 40px;
    height: 40px;
    padding: 0 15px;
  }
  .start-time {
    line-height: 40px;
    height: 40px;
    padding: 0 15px;
  }
}
</style>
